<template lang="pug">
  .container
    v-ginsengNav
    .a-amount
      .assetsStyle
        .assets
          span.a-title(data-title="参王:") 参王:
          ul
            li
              span(data-title="一类参王") 一类参王&nbsp;
              span(data-title="" class='value') {{list?list.one_ginseng:0}}
              span(data-title="株") 株
            li
              span(data-title="二类参王") 二类参王&nbsp;
              span(data-title="") {{list?list.two_ginseng:0}}
              span(data-title="株") 株
            li
              span(data-title="三类参王") 三类参王&nbsp;
              span(data-title="") {{list?list.three_ginseng:0}}
              span(data-title="株") 株
        .assets
          span.a-title(data-title="极品参:") 极品参:
          ul
            li
              span(data-title="一类参王") 一类参王&nbsp;
              span(data-title="") {{list?list.one_best_ginsen:0}}
              span(data-title="株") 株
            li
              span(data-title="二类参王") 二类参王&nbsp;
              span(data-title="") {{list?list. two_best_ginsen:0}}
              span(data-title="株") 株
            li
              span(data-title="三类参王") 三类参王&nbsp;
              span(data-title="") {{list?list.three_best_ginsen:0}}
              span(data-title="株") 株
      .a-worth
        div
          span.aw-title(data-title="总价值：") 总价值：
          span.aw-value(data-title="") {{list?list.one_ginseng*this.exchange.oneGinseng+list.two_ginseng*this.exchange.twoGinseng+list.three_ginseng*this.exchange.threeGinseng+list.one_best_ginsen*this.exchange.oneBestGinseng+list.two_best_ginsen*this.exchange.twoBestGinseng+list.three_best_ginsen*this.exchange.threeBestGinseng:0}}{{gametype}}
        .aw-btn(data-title="一键卖出" @click="changePage();") 一键卖出
    .salesRecord
      .sr-title(data-title="售出记录") 售出记录
      .list-head
        span.lh-title1(data-title="编号") 编号
        span.lh-title2(data-title="参王") 参王
        span.lh-title3(data-title="极品参") 极品参
        span.lh-title4(data-title="总价值") 总价值
        span.lh-title4(data-title="审核") 审核
        span.lh-title5(data-title="售出时间") 售出时间
      ul(v-if="listmore.length>0")
        li(v-for='(item,index) in listmore' :key='index')
          span.lh-title1(data-title="1") {{index+1}}
          span.lh-title2(data-title="37株") {{item.ginsengTotal}}株
          span.lh-title3(data-title="30株") {{item.bestGinsengTotal}}株
          span.lh-title4(data-title="3000BPX") {{item.totalValue}}{{gametype}}
          span.lh-title4(data-title="3000BPX") {{item.isPass?'审核通过':'未审核'}}
          span.lh-title5(data-title="2018-07-14 16:00") {{item.operatingDate}}

  //
</template>

<script>
import $ from "jquery";
import ginsengNav from "../ginsengNav";

export default {
  name: "assets",
  data() {
    return {
      list: u.getStore("userInfo") || "",
      listmore: "",
      gametype: u.getStore("winning").type
      // userInfo: u.getStore('userInfo')
    };
  },
  created() {
    let exchange = JSON.parse(localStorage.getItem("exchange"));
    this.exchange = exchange;
    console.log(this.exchange);
    let timer = setInterval(() => {
      if (u.flag) {
        this.list = u.getStore("userInfo");
        u.sellListGinseng({ phone: u.getStore("user").userid }, data => {
          if (data && data[0] && data[0].ginsengSellReCordList) {
            this.listmore = data[0].ginsengSellReCordList;
          }
        });

        clearInterval(timer);
      }
    }, 10);
  },
  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
  },
  components: {
    "v-ginsengNav": ginsengNav
  },
  methods: {
    changePage() {
      this.$router.push({ path: "/sold" });
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  padding: 30px;
  width: 100%;
  height: 100vh;
  background-image: url('../../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .tap {
    width: 95% !important;
  }

  .a-amount {
    padding: 54px 9px;
    width: 100%;
    /* height 374px */
    background-image: url('../../../static/image/assetsbg1.png');
    background-size: 100% 100%;
    margin-top: 5%;

    .assetsStyle {
      display: flex;
      justify-content: space-around;

      .assets {
        &:first-child {
          margin-right: 50px;
        }

        .a-title {
          margin-right: 8px;
          display: inline-block;
          position: relative;
          font-size: 22px;
          color: white;
          z-index: 0;
          vertical-align: top;
          text-shadow: 0 2px #3a230a, -3px 0 #3a230a, -2px 2px #3a230a, -3px 1px #3a230a;
        }

        ul {
          display: inline-block;
          vertical-align: top;

          li {
            margin-bottom: 17px;
            font-size: 22px;
            color: white;

            > span {
              position: relative;
              z-index: 0;
              text-shadow: 0 2px #a56a2c, -3px 0 #a56a2c, -2px 2px #a56a2c, -3px 1px #a56a2c;
            }

            > span:nth-child(2) {
              padding-left: 5px;
              padding-right: 10px;
            }
          }
        }
      }
    }

    .a-worth {
      margin-top: 52px;
      padding-left: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .aw-title {
        display: inline-block;
        position: relative;
        font-size: 22px;
        color: white;
        z-index: 0;
        text-shadow: 0 2px #3a230a, -3px 0 #3a230a, -2px 2px #3a230a, -3px 1px #3a230a;
      }

      .aw-value {
        margin-left: 30px;
        display: inline-block;
        position: relative;
        font-size: 22px;
        color: white;
        z-index: 0;
        text-shadow: 0 2px #ca4737, -3px 0 #ca4737, -2px 2px #ca4737, -3px 1px #ca4737;
      }

      .aw-btn {
        float: right;
        display: inline-block;
        position: relative;
        width: 199px;
        height: 55px;
        text-align: center;
        font-size: 24px;
        color: white;
        line-height: 50px;
        z-index: 0;
        background: url('../../../static/image/z_1.png') no-repeat;
        background-size: 100% 100%;
        text-shadow: 0 2.5px #ca4737, -3px 0 #ca4737, -2px 3px #ca4737, -4px 1px #ca4737;
      }
    }
  }

  .salesRecord {
    margin-top: 29px;
    width: 100%;
    height: 705px;
    background-image: url('../../../static/image/ginsengbase2.png');
    background-size: 100% 100%;
    padding: 27px 21px;
    margin-left: -1%;

    .sr-title {
      width: 379px;
      height: 90px;
      margin: 0 auto;
      text-align: center;
      background-image: url('../../../static/image/z_3.png');
      background-size: 100% 100%;
      font-size: 22px;
      color: #ffffff;
      line-height: 53px;
      text-shadow: 0 2px #1c6b65, -3px 0 #1c6b65, -2px 2px #1c6b65, -3px 1px #1c6b65;
    }

    .list-head {
      display: flex;
      justify-content: space-around;
      font-size: 22px;
      background: url('../../../static/image/z_4.png') no-repeat;
      height: 64px;
      line-height: 55px;
      background-size: 100% 100%;
      margin-top: 26px;
      margin-bottom: 35px;
      color: #fff;
      width: 100%;
      text-shadow: 0 2px #a56a2c, -3px 0 #a56a2c, -2px 2px #a56a2c, -3px 1px #a56a2c;

      span {
        display: inline-block;
        text-align: center;
        margin-right: 4%;
      }
    }

    ul {
      max-height: 300px;
      overflow: auto;
      font-size: 20px;

      li {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 59px;
        line-height: 59px;
        color: #fff;
        background-image: url('../../../static/image/z_5.png');
        background-size: 100% 100%;

        span {
          display: inline-block;
          text-align: center;
        }
      }

      ul::-webkit-scrollbar {
        width: 10px;
      }

      ul::-webkit-scrollbar-track-piece {
        background-color: #ebcf8f;
        -webkit-border-radius: 5px;
      }

      ul::-webkit-scrollbar-thumb:vertical {
        background-color: #b6e866;
        -webkit-border-radius: 5px;
      }

      .lh-title1 {
        width: 8%;
      }

      .lh-title2 {
        width: 15%;
      }

      .lh-title3 {
        width: 15%;
        margin-left: 1%;
      }

      .lh-title4 {
        padding-left: 10px;
      }

      .lh-title5 {
        width: 24%;
        overflow: hidden;
      }
    }
  }
}
</style>
